<template>
    <!-- 二级菜单栏部分 -->
        <div class="menus">
            <div  @mouseleave="hiddenHotCities">
                <div class="menus-item" 
                v-for="(item,index) in hotCityList" 
                :key="index"
                :class="{active:index ===currentIndex && isShow}"
                @mouseover="getHotCities(index)">
                    <span>{{item.type}}</span>
                    <span class="el-icon-arrow-right"></span>
                </div>

                <!-- 移动鼠标显示部分 -->
                <div class="menus-nav" 
                v-if="isShow">
                    <p  
                    v-for="(item,index) in hotCityList[currentIndex].children"
                    :key="index">
                        <span class="ranking">{{index+1}}</span>
                        <span class="city" @click="clickCity(item.city)">{{item.city}}</span>
                        <span class="describe">{{item.desc}}</span>
                    </p>
                </div>
            </div>

            <!-- 推荐城市部分 -->
            <div class="recommend-city">
                <h4>推荐城市</h4>
                <a href="">
                    <img src="@/assets/pic_sea.jpeg" alt="">
                </a>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            hotCityList:[],
            isShow:false,
            currentIndex:null
        }
    },
    methods:{
        getHotCities(index){
            this.isShow=true;
            this.currentIndex = index
        },
        hiddenHotCities(){
            this.isShow=false
        },
        clickCity(city){
            this.$router.push({
              query:{
                  city
              }
            })
        }
    },
    mounted(){
        this.$axios({
        url:"/posts/cities"
        }).then(res=>{
         console.log(res.data);
        const {data} = res.data;
        this.hotCityList = data;
    })
    }
}
</script>

<style lang="less" scoped>
.menus{
    border: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 0 1px #f5f5f5;
}
.menus .menus-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 260px;
    height: 41px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0 20px;
    font-size: 14px;
}
.menus .menus-nav{
    position: absolute;
    top: 0;
    left: 280px;
    padding: 10px 15px;
    width: 350px;
    height: 180px;
    border: 1px solid #ccc;
    border-left: none;
    background: #fff;
    z-index: 999;
    p{
        height: 36px;
        .ranking {
          cursor: pointer;
          padding: 0 10px;
          font-size: 24px;
          font-style: italic;
          color: #FFA500;
        }
        .city {
          cursor: pointer;
          padding-right: 5px;
          color: #FFA500;
          font-size: 14px;
          &:hover {
            text-decoration: underline;
          }
        }
        .describe {
           cursor: pointer;
           color: #99a6c4;
            &:hover {
            text-decoration: underline; 
            }
        }
    }
}
.menus .recommend-city{
    margin-top: 20px;
    width: 100%;
    h4{
        border-left: none;
        font-weight: 400;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }
    img{
        width: 100%;
        height: 175px;
        display: block;
    }
}
.active{
    border-right: none;
}
</style>